/* Skin showcase: a single lit stage with picker and animation controls. */
.skins{--skin-tint:#c86bff;--skin-glow:#b8ff5c;position:relative;overflow:hidden;padding:clamp(5rem,10vw,8.5rem) 0;background:#070a1b}
.skins::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 55% 60% at 30% 55%,color-mix(in srgb,var(--skin-tint) 22%,transparent),transparent 70%);transition:background .8s cubic-bezier(.16,1,.3,1)}
.skins__layout{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}

.skins__stage{position:relative;height:clamp(440px,72vh,700px);overflow:hidden;background:linear-gradient(180deg,#0d1334 0%,#0a0f2a 62%,#070a1d 100%);box-shadow:0 30px 80px -30px rgba(3,4,16,.9)}
.skins__stage::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.75) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(126,232,255,.55) 0 1px,transparent 1.5px);background-size:131px 117px,197px 173px;background-position:11px 23px,64px 90px;opacity:.35}
.skins__halo{position:absolute;left:50%;bottom:13%;width:min(78%,520px);aspect-ratio:3/1;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--skin-tint) 55%,transparent),color-mix(in srgb,var(--skin-tint) 12%,transparent) 62%,transparent);filter:blur(6px);transition:background .8s cubic-bezier(.16,1,.3,1)}
.skins__halo::after{content:"";position:absolute;inset:18% 12%;border-radius:50%;border:1px solid color-mix(in srgb,var(--skin-glow) 45%,transparent)}
.skins__viewer{position:absolute;inset:0;width:100%;height:100%;background:transparent;--poster-color:transparent;--progress-bar-color:transparent;cursor:grab;transition:opacity .35s cubic-bezier(.16,1,.3,1),filter .35s ease}
.skins__viewer:active{cursor:grabbing}
.skins__viewer:focus-visible{outline:3px solid var(--cyan);outline-offset:-3px}
.skins.is-loading .skins__viewer{opacity:.25;filter:blur(3px)}

.skins__progress{position:absolute;left:50%;top:50%;width:140px;height:3px;translate:-50% -50%;background:rgba(204,216,255,.16);overflow:hidden;opacity:0;transition:opacity .2s}
.skins.is-loading .skins__progress{opacity:1}
.skins__progress span{position:absolute;inset:0;width:40%;background:var(--skin-glow);animation:skinsLoad 1.1s cubic-bezier(.65,0,.35,1) infinite}
@keyframes skinsLoad{from{translate:-100% 0}to{translate:260% 0}}

.skins__hint{position:absolute;left:50%;bottom:22px;translate:-50% 0;margin:0;display:flex;align-items:center;gap:8px;white-space:nowrap;color:#c9d4f2;font-size:.75rem;font-weight:600;pointer-events:none;transition:opacity .5s ease,translate .5s cubic-bezier(.16,1,.3,1)}
.skins__hint svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;animation:skinsNudge 2.6s ease-in-out infinite}
.skins.was-touched .skins__hint{opacity:0;translate:-50% 8px}
@keyframes skinsNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}

.skins__tools{position:absolute;top:16px;right:16px;display:flex;gap:6px}
.skins__tools button{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border:1px solid rgba(204,216,255,.18);border-radius:8px;background:rgba(7,10,27,.62);backdrop-filter:blur(8px);color:#e7e9fa;font:700 .72rem/1 Manrope,system-ui,sans-serif;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease}
.skins__tools button:hover{background:rgba(24,30,66,.85);border-color:rgba(204,216,255,.34)}
.skins__tools button[aria-pressed="false"]{color:#97a3c6}
.skins__tools button[aria-pressed="true"] svg{color:var(--skin-glow)}
.skins__tools svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.skins__error{display:none;position:absolute;inset:auto 24px 50%;margin:0;text-align:center;color:#ffd7a0;font-weight:700}
.skins.has-error .skins__error{display:block}
.skins.has-error .skins__hint{display:none}

.skins__panel h2{margin:0;font:700 clamp(2.3rem,4.2vw,4.4rem)/1 Unbounded,sans-serif;letter-spacing:-.04em;text-wrap:balance}
.skins__lede{max-width:34ch;margin:1.4rem 0 0;color:var(--mist);font-size:1.02rem;line-height:1.7}
.skins__picker{display:grid;margin-top:2.4rem;border-top:1px solid var(--line)}
.skins__picker button{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:100%;min-height:64px;padding:0 14px;border:0;border-bottom:1px solid var(--line);background:transparent;color:#aab4d3;text-align:left;font:inherit;cursor:pointer;transition:background .25s ease,color .25s ease,padding .3s cubic-bezier(.16,1,.3,1)}
.skins__picker button:hover{color:#fff;background:rgba(204,216,255,.04)}
.skins__picker button[aria-selected="true"]{color:#fff;padding-left:20px;background:linear-gradient(90deg,color-mix(in srgb,var(--dot) 18%,transparent),transparent 80%)}
.skins__picker strong{font:600 clamp(1rem,1.5vw,1.2rem)/1.2 Unbounded,sans-serif;letter-spacing:-.02em}
.skins__picker small{color:#8f9bbf;font-size:.74rem;font-weight:600}
.skins__dot{width:10px;height:10px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 3px color-mix(in srgb,var(--dot) 22%,transparent)}
.skins__picker button[aria-selected="true"] .skins__dot{box-shadow:0 0 0 4px color-mix(in srgb,var(--dot) 30%,transparent)}

.skins__now{margin-top:2rem}
.skins__now p{margin:0 0 .9rem;color:#8f9bbf;font-size:.78rem;font-weight:700}
.skins__now strong{color:#fff}
.skins__anims{display:flex;flex-wrap:wrap;gap:8px}
.skins__anims button{min-height:40px;padding:0 16px;border:1px solid rgba(204,216,255,.2);border-radius:999px;background:rgba(13,20,48,.7);color:#dfe5fa;font:700 .8rem/1 Manrope,system-ui,sans-serif;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .15s ease}
.skins__anims button:hover{border-color:color-mix(in srgb,var(--skin-glow) 60%,transparent);color:#fff}
.skins__anims button:active{transform:scale(.96)}
.skins__anims button[aria-pressed="true"]{background:var(--skin-glow);border-color:transparent;color:#0a0f24}
.skins__status{min-height:1.4em;margin:1.4rem 0 0;color:#7f8bb0;font-size:.74rem}
.skins button:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

@media(max-width:900px){
  .skins__layout{grid-template-columns:1fr;gap:0}
  .skins__panel{display:contents}
  .skins__panel h2{order:1}
  .skins__lede{order:2;margin-bottom:1.8rem}
  .skins__stage{order:3;height:clamp(340px,56vh,480px);margin:0 -18px}
  .skins__picker{order:4;margin-top:1.4rem}
  .skins__now{order:5;margin-top:1.4rem}
  .skins__status{order:6}
  .skins__picker button{min-height:54px}
  .skins__picker button[aria-selected="true"]{padding-left:18px}
}
@media(max-width:520px){
  .skins__tools{top:12px;right:12px}
  .skins__tools button{width:38px;padding:0;justify-content:center;font-size:0;gap:0}
  .skins__tools svg{width:17px;height:17px}
  .skins__hint{font-size:.7rem}
}
@media(prefers-reduced-motion:reduce){
  .skins::before,.skins__halo,.skins__viewer,.skins__picker button,.skins__hint{transition:none}
  .skins__hint svg,.skins__progress span{animation:none}
}