.skin3d-stage{height:360px;position:relative;perspective:900px;background:radial-gradient(ellipse at center,#27305b,#101633);border-radius:16px;overflow:hidden;touch-action:none;cursor:grab;max-width:100%}
.skin3d-stage:active{cursor:grabbing}.skin3d-stage:focus-visible{outline:3px solid #9bb6ff;outline-offset:3px}
.skin3d-model{position:absolute;left:50%;top:50%;transform-style:preserve-3d}
.skin3d-cube{position:absolute;transform-style:preserve-3d}
.skin3d-face{position:absolute;image-rendering:pixelated;backface-visibility:hidden}
.skin3d-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:16px 0}.skin3d-controls label{display:flex;align-items:center;gap:6px;font-size:.9rem}.skin3d-controls input[type=range]{width:105px}.skin3d-controls select{padding:6px;border-radius:6px}.skin3d-controls input{accent-color:#9bb6ff}
.skin3d-result{margin:20px 0}.skin3d-upload{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:24px 0}.skin3d-upload input{max-width:100%}.skin3d-status{min-height:1.5em}
@media(max-width:480px){.skin3d-stage{height:330px}.skin3d-controls{gap:10px}.skin3d-controls input[type=range]{width:90px}}
.skin3d-upload .btn.primary{display:inline-block;width:auto;font-size:18px;padding:12px 18px}
.skin3d-file{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skin3d-file:focus-visible + .btn.primary{outline:3px solid var(--sky);outline-offset:4px}
.skin3d-hint{color:var(--muted);margin:0 0 24px}
/* Keep the viewer and its next step together in the first screen. */
.skin3d-page{padding-top:12px}
.skin3d-page h1{margin-bottom:12px}
.skin3d-page .skin3d-upload{margin:12px 0;gap:12px}
.skin3d-page .skin3d-status{margin:8px 0}
.skin3d-page .skin3d-stage{height:320px}
.skin3d-page .skin3d-controls{padding:10px 0;gap:8px 12px}
/* Reserve the wrapped controls before the sample skin mounts them. */
.skin3d-page #viewer-controls{min-height:120px}
.skin3d-page .skin3d-create{margin:8px 0 16px}
.skin3d-page .skin3d-create .btn{display:inline-block;width:auto;padding:12px 18px;font-size:18px}
.skin3d-page .skin3d-hint{margin:0 0 8px}
@media(max-width:480px){
 .skin3d-page{padding-top:8px}
 .skin3d-page h1{margin-bottom:8px}
 .skin3d-page .skin3d-upload{gap:8px;margin:10px 0}
 .skin3d-page .skin3d-stage{height:280px}
 .skin3d-page #viewer-controls{min-height:160px}
}