#sketch-to-style{max-width:1200px;margin:70px auto;padding:32px 22px;color:#262132;background:#faf7f2;border-radius:24px;scroll-margin-top:100px}#sketch-to-style h2{font-size:clamp(30px,5vw,48px);line-height:1.15;margin:12px 0}#sketch-to-style .sts-eyebrow{font-size:12px;letter-spacing:.2em;color:#69522d;font-weight:700}.sts-intro{font-size:19px;max-width:740px}.sts-disclosure{max-width:880px;line-height:1.7;margin:20px 0 32px}.sts-grid{display:grid;gap:28px;grid-template-columns:repeat(2,minmax(0,1fr))}.sts-card{min-width:0;padding:20px;border:1px solid #dacfbf;border-radius:16px;background:white}.sts-card h3{font-size:22px;margin:0 0 18px}.sts-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sts-pair figure{margin:0}.sts-enlarge{width:100%;border:0;padding:0;background:#eee8de;cursor:zoom-in;color:#3d3342;border-radius:8px;overflow:hidden}.sts-enlarge img{width:100%;height:265px;object-fit:contain;display:block}.sts-enlarge span{display:block;font-size:11px;padding:8px}.sts-pair figcaption{font-weight:700;font-size:13px;margin:10px 0 4px}.sts-pair p{font-size:12px;line-height:1.5;color:#675f6a;margin:0}.sts-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.sts-controls button{border:1px solid #827084;border-radius:24px;background:#fff;color:#423249;padding:9px 12px;font-size:12px;cursor:pointer;min-height:44px}.sts-controls button[aria-pressed=true]{background:#49334f;color:white}.sts-controls button:focus-visible,.sts-enlarge:focus-visible,.sts-close:focus-visible{outline:3px solid #bc8b36;outline-offset:3px}.sts-dialog{border:0;border-radius:12px;padding:16px;background:#faf7f2;max-width:94vw;max-height:94vh;color:#262132}.sts-dialog::backdrop{background:#15101ce8}.sts-dialog img{max-width:86vw;max-height:76vh;object-fit:contain;display:block;margin:auto}.sts-dialog p{text-align:center;margin:12px}.sts-close{display:block;margin:0 0 12px auto;border:0;border-radius:8px;background:#49334f;color:white;padding:10px 18px;cursor:pointer}@media(max-width:800px){.sts-grid{grid-template-columns:1fr}.sts-enlarge img{height:300px}}@media(max-width:480px){#sketch-to-style{padding:24px 12px}.sts-card{padding:14px}.sts-enlarge img{height:210px}.sts-pair{gap:8px}}
/* Reliable touch controls and stable image switching */
#sketch-to-style .sts-slide[hidden]{display:none!important}#sketch-to-style .sts-controls{position:relative;z-index:2;gap:10px}#sketch-to-style .sts-controls button{min-height:48px;padding:12px 16px;touch-action:manipulation;position:relative;white-space:normal;font-weight:600;-webkit-tap-highlight-color:transparent}#sketch-to-style .sts-controls button[aria-pressed=true]{box-shadow:0 0 0 2px #49334f;outline-offset:4px}#sketch-to-style .sts-controls button[aria-pressed=true]::before{content:'✓ ';}#sketch-to-style .sts-variant{min-width:0}#sketch-to-style .sts-pair figcaption{min-height:38px}#sketch-to-style .sts-pair p{min-height:36px}

/* Native radio selection: independent of JavaScript click propagation. */
#sketch-to-style .sts-slide{display:none!important}
#sketch-to-style .sts-card:has(input[value="0"]:checked) [data-slide="0"],
#sketch-to-style .sts-card:has(input[value="1"]:checked) [data-slide="1"],
#sketch-to-style .sts-card:has(input[value="2"]:checked) [data-slide="2"],
#sketch-to-style .sts-card:has(input[value="3"]:checked) [data-slide="3"]{display:block!important}
#sketch-to-style fieldset.sts-controls{border:0;padding:0;margin:18px 0 0;min-width:0}
#sketch-to-style .sts-controls legend{font-size:13px;font-weight:600;margin-bottom:10px}
#sketch-to-style .sts-style-option{display:inline-flex;align-items:center;gap:8px;min-height:48px;border:1px solid #827084;border-radius:24px;padding:10px 14px;background:white;color:#423249;cursor:pointer;touch-action:manipulation;font-size:13px;font-weight:600;box-sizing:border-box}
#sketch-to-style .sts-style-option input{appearance:auto!important;position:static!important;opacity:1!important;width:18px!important;height:18px!important;margin:0!important;accent-color:#49334f;flex:none;pointer-events:auto!important}
#sketch-to-style .sts-style-option:has(input:checked){background:#49334f;color:white;border-color:#49334f}
#sketch-to-style .sts-style-option:focus-within{outline:3px solid #bc8b36;outline-offset:3px}

/* Direct touch input covers its whole visible label on Safari. */
#sketch-to-style .sts-style-option{position:relative;isolation:isolate;min-height:54px}
#sketch-to-style .sts-style-option input{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:0!important;z-index:2;cursor:pointer;touch-action:manipulation}
#sketch-to-style .sts-style-option span{pointer-events:none;padding-left:25px}
#sketch-to-style .sts-style-option span::before{content:'○';position:absolute;left:14px;font-size:18px;line-height:1}
#sketch-to-style .sts-style-option:has(input:checked) span::before{content:'●'}
@media(max-width:800px){
 body:has(#sketch-to-style) .interact-dock{position:relative!important;inset:auto!important;transform:none!important;margin:24px auto!important;width:max-content;max-width:90vw;z-index:1!important}
 #sketch-to-style .sts-controls{display:grid;grid-template-columns:1fr}
 #sketch-to-style .sts-style-option{width:100%;justify-content:flex-start}
}