.ypz-studio{display:grid;grid-template-columns:minmax(300px,1fr) minmax(0,1.1fr);gap:55px;align-items:start}.ypz-avatar{position:relative;width:100%;aspect-ratio:4/5;isolation:isolate}.ypz-avatar-frame{position:absolute;inset:0}.ypz-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;max-width:none;pointer-events:none}.ypz-preview{position:sticky;top:45px;background:#eee9dc;border-radius:3px;padding:10px 24px 20px;text-align:center}.ypz-preview .ypz-avatar{max-height:64vh;max-width:440px;margin:auto}.ypz-preview-name{font:italic 28px/1.2 Georgia,serif;margin:0}.ypz-preview-caption{font-size:12px;margin:8px 0}.ypz-preview [role=status]{font-size:12px;margin:0}.ypz-options fieldset:first-child{margin-top:0}.ypz-options legend{margin-bottom:12px}.ypz-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.ypz-tiles button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 5px;min-width:0;font-size:12px;line-height:1.3;overflow:hidden}.ypz-tiles img{width:100%;height:100px;object-fit:contain;object-position:center;margin-bottom:6px}.ypz-tiles button[aria-pressed=true]::after{position:absolute;top:5px;right:5px;border-radius:50%;background:#405f4c;color:white;width:20px;height:20px;display:grid;place-items:center}.ypz-swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.ypz-swatches button{padding:7px 3px;position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;font-size:10px;line-height:1.2;min-height:69px}.ypz-swatch{width:28px;height:28px;border-radius:50%;border:1px solid #9998;display:block}.ypz-swatches button[aria-pressed=true]::after{position:absolute;right:3px;top:3px;font-size:13px;color:#202631;background:#F6F0E5;border-radius:50%;width:17px;height:17px}.ypz-options details{border-block-start:1px solid #d4cebf;padding:18px 0 0;margin:20px 0}.ypz-options summary{cursor:pointer;min-height:44px;font-family:Georgia,serif;font-size:24px}.ypz button{transition:border-color .15s,background-color .15s}.ypz button:hover{border-color:#5C8D73}
@media(max-width:800px){.ypz-studio{display:flex;flex-direction:column;gap:25px}.ypz-preview{top:0;z-index:100;width:100%;padding:0 8px 8px;display:grid;grid-template-columns:minmax(0,1fr) minmax(75px,.45fr);align-items:center;box-shadow:0 1px 0 #d4cebf}.ypz-preview .ypz-avatar{grid-row:1/4;height:auto;width:100%;max-width:224px;max-height:none;aspect-ratio:4/5;margin:0 auto}.ypz-preview-name{font-size:24px}.ypz-preview-caption{font-size:11px}.ypz-options{width:100%}.ypz-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.ypz-options fieldset{scroll-margin-top:300px}.ypz-tiles img{height:95px}.ypz-options{padding-bottom:10px}}
@media(prefers-reduced-motion:reduce){.ypz button{transition:none}}

@media(max-width:360px){.ypz-swatches{grid-template-columns:repeat(4,minmax(0,1fr))}.ypz-preview-name{font-size:21px;overflow-wrap:anywhere}}

/* Shared, ordered skin palette: six options, readable touch targets. */
.ypz-skin-swatches{grid-template-columns:repeat(6,minmax(44px,1fr))}
@media(max-width:400px){.ypz-skin-swatches{grid-template-columns:repeat(3,minmax(44px,1fr))}}