.modal:has(.skin-viewer){z-index:1000;background:#0000007a;flex-direction:row;justify-content:center;align-items:center;padding:clamp(0px,3vw,24px);animation:.4s viewer-fade;display:flex;position:fixed;inset:0}@media (width<=1023px){.modal:has(.skin-viewer){padding:0;top:72px}}@media (width<=767px){.modal:has(.skin-viewer){top:64px}}@media (width>=1024px){.modal:has(.skin-viewer){padding:clamp(0px,3vw,24px);top:0}}.modal:has(.skin-viewer)>.content{display:contents}.modal:has(.skin-viewer)>.content>.header{display:none}@keyframes viewer-fade{0%{opacity:0}}@keyframes viewer-scale{0%{opacity:0;transform:scale(.92)}}.skin-viewer{background:#202228;border-radius:clamp(0px,2vw,16px);flex-direction:column;width:100%;height:100%;animation:.4s viewer-scale;display:flex;position:relative;overflow:hidden}@media (width<=1023px){.skin-viewer{border-radius:0;max-height:100%;animation:.4s viewer-fade}}.viewer-top{z-index:2;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:clamp(16px,4vw,48px) clamp(16px,4.5vw,56px) 0;display:grid;position:absolute;top:0;left:0;right:0}.viewer-top .viewer-tabs{grid-column:1}.viewer-top .viewer-btns{grid-column:2}.viewer-top>.btn-sq{grid-column:3;justify-self:end}@media (width<=1023px){.viewer-top{position:fixed;top:72px;right:0}}@media (width<=767px){.viewer-top{top:64px}}.viewer-tabs{color:#f5f6f7b8;background:#27292f;border-radius:8px;flex-shrink:0;width:320px;font-family:Saira,Saira Fallback,sans-serif;font-size:16px;font-weight:500;display:flex;overflow:hidden}@media (width<=1023px){.viewer-tabs{display:none}}.viewer-tabs button{color:inherit;font:inherit;cursor:pointer;background:0 0;border:none;flex:1;padding:10px 16px;transition:all .2s}.viewer-tabs button:hover{color:#f5f6f7}.viewer-tabs button.active{color:#f5f6f7;background:#434f65a3}.viewer-btns{gap:12px;display:flex}@media (width<=1023px){.viewer-btns.desktop{display:none}}.viewer-btns.mobile{display:none}@media (width<=1023px){.viewer-btns.mobile{flex-direction:column;flex-shrink:0;padding:16px clamp(16px,4vw,40px) clamp(16px,4vw,24px);display:flex}}.viewer-btns.mobile .btn-secondary{text-align:center;padding:14px 20px}.viewer-img{z-index:0;background-color:#202228;background-image:linear-gradient(90deg,#ffffff0d 1px,#0000 1px),linear-gradient(#ffffff0d 1px,#0000 1px);background-position:50%;background-size:clamp(56px,5vw,80px) clamp(56px,5vw,80px);flex-direction:row;flex:1;justify-content:center;align-items:center;min-height:0;display:flex;position:relative}.viewer-img:before{content:"";pointer-events:none;background:radial-gradient(#0000 30%,#20222880 80%);position:absolute;inset:0}:root.mask-on .viewer-img{background-color:#202228;background-image:none}:root.mask-on .viewer-img:before{display:none}.viewer-img img,.viewer-img video,.viewer-img .viewer-video-mask{z-index:1;max-width:90%;max-height:70%;position:relative}@media (width<=1023px){.viewer-img img,.viewer-img video,.viewer-img .viewer-video-mask{max-width:90%;max-height:90%}}.viewer-img video{object-fit:cover}.viewer-img .viewer-video-mask{pointer-events:none;z-index:2;object-fit:fill;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.viewer-wear{z-index:2;background:#202228;border:1px solid #40444e;border-bottom:none;border-radius:12px 12px 0 0;flex-wrap:wrap;flex-shrink:0;gap:16px;padding:28px 40px 40px;display:flex;position:relative}@media (width<=1023px){.viewer-wear{border:none;border-radius:0;padding:clamp(12px,3vw,28px) clamp(16px,4vw,40px)}}.viewer-hint{color:#f5f6f7b8;text-align:center;background:#27292f;border-radius:6px;width:98%;padding:8px 12px;font-size:13px;position:absolute;top:-5px;left:50%;transform:translate(-50%,-100%)}.viewer-hint strong{color:#f5f6f7}.viewer-inspect-actions{flex-basis:100%;gap:12px;margin-top:-8px;display:flex}.viewer-inspect-actions .btn-secondary{text-align:center;flex:1}.wear-col{flex-direction:column;flex:1;align-items:center;gap:10px;min-width:0;display:flex}.slider-header{align-self:stretch;align-items:center;gap:8px;min-height:32px;display:flex;position:relative}.slider-header .info-end{margin-left:auto}@media (width<=767px){.slider-header{position:static}.slider-header.pattern-rows{flex-wrap:wrap;gap:0 8px}.slider-header.pattern-rows .preview-indicator{order:1}.slider-header.pattern-rows .slider-label{order:2;margin-right:auto}.slider-header.pattern-rows .info-end{order:3}.slider-header.pattern-rows .header-break{order:4}.slider-header.pattern-rows .pattern-seed-field{order:5;margin-top:10px;position:static;left:auto;transform:none}.slider-header.pattern-rows .special-patterns-btn{order:6;margin-top:10px}}.header-break{display:none}@media (width<=767px){.header-break{flex-basis:100%;height:0;display:block}}.slider-label{color:#f5f6f7;font-family:Saira,Saira Fallback,sans-serif;font-size:clamp(14px,1.5vw,18px);font-weight:600}.slider-input{color:#f5f6f7;text-align:center;-moz-appearance:textfield;background:#27292f;border:1px solid #40444e;border-radius:6px;outline:none;width:80px;padding:6px 10px;font-family:Saira,Saira Fallback,sans-serif;font-size:14px}.slider-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.slider-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.slider-input:focus{border-color:#6b7a99}.wear-slider:not(.pattern-slider)+.wear-range .slider-input{flex:1;max-width:200px}.fade-pct-field{width:96px;display:block;position:relative}.fade-pct-field input{width:100%;color:inherit;font:inherit;text-align:center;-moz-appearance:textfield;background:0 0;border:none;outline:none;padding:0}.fade-pct-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.fade-pct-field input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.fade-pct-field .pct{color:#f5f6f7b8;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.fade-pct-field:focus-within{border-color:#6b7a99}.wear-range{color:#f5f6f7b8;flex-direction:row;justify-content:space-between;align-items:center;gap:5px;width:100%;font-family:Saira,Saira Fallback,sans-serif;font-size:clamp(16px,2vw,24px);font-weight:500;display:flex}.wear-range.fade-range{grid-template-columns:1fr auto 1fr;align-items:center;display:grid}.wear-range.fade-range>span:first-child{text-align:left}.wear-range.fade-range>span:last-child{text-align:right}.wear-slider{cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;width:100%;height:32px;position:relative}.wear-slider .track{top:50%;pointer-events:none;border-radius:3px;height:6px;position:absolute;inset-inline:0;overflow:hidden;transform:translateY(-50%)}.wear-slider .float-bar-segment{height:100%;position:absolute;top:0}.wear-slider .float-bar-segment:first-child{background:#4caf50}.wear-slider .float-bar-segment:nth-child(2){background:#8bc34a}.wear-slider .float-bar-segment:nth-child(3){background:#ffc107}.wear-slider .float-bar-segment:nth-child(4){background:#ff9800}.wear-slider .float-bar-segment:nth-child(5){background:#f44336}.wear-slider .float-bar-out{mix-blend-mode:color;pointer-events:none;background:gray;height:100%;position:absolute}.wear-slider .tooltip-wrap{position:absolute;top:50%;transform:translate(-50%,-50%)}.wear-slider .tooltip-popup{bottom:calc(100% + 12px);left:50%;transform:translate(-50%)}.wear-slider .thumb{cursor:grab;background:#fff;border-radius:50%;width:12px;height:12px;transition:box-shadow .15s ease-out;box-shadow:0 0 #ffffff80}.wear-slider .thumb:active,.wear-slider .thumb.active{cursor:grabbing;box-shadow:0 0 0 6px #ffffff80}.pattern-slider{width:100%}.pattern-slider input[type=range]{appearance:none;cursor:pointer;touch-action:none;background:#40444e;border-radius:3px;outline:none;width:100%;height:6px;margin:13px 0}.pattern-slider input[type=range]::-webkit-slider-thumb{appearance:none;cursor:grab;background:#fff;border-radius:50%;width:12px;height:12px;transition:box-shadow .15s ease-out;box-shadow:0 0 #ffffff80}.pattern-slider input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;box-shadow:0 0 0 6px #ffffff80}.pattern-slider input[type=range]::-moz-range-thumb{cursor:grab;background:#fff;border:none;border-radius:50%;width:12px;height:12px;transition:box-shadow .15s ease-out;box-shadow:0 0 #ffffff80}.pattern-slider input[type=range]::-moz-range-thumb:active{cursor:grabbing;box-shadow:0 0 0 6px #ffffff80}.wear-cells{color:#f5f6f7b8;font-size:clamp(14px,1.5vw,18px);display:flex}.wear-cells .cell{border:1px solid #40444e;flex-direction:row;flex:1;justify-content:center;align-items:center;margin-left:-1px;padding:10px 12px;display:flex}.wear-cells .cell:first-child{border-radius:6px 0 0 6px;margin-left:0}.wear-cells .cell:last-child{border-radius:0 6px 6px 0}.wear-info{cursor:help;color:#f5f6f7b8;flex-direction:row;justify-content:center;align-items:center;transition:color .2s;display:flex;position:relative}.wear-info>svg{width:20px;height:20px}.wear-info:hover{color:#f5f6f7}.wear-info:hover .dropdown{display:flex}.wear-info .dropdown{z-index:10;background:#27292f;border:1px solid #40444e;border-radius:8px;flex-direction:column;gap:8px;padding:12px 16px;display:none;position:absolute;bottom:calc(100% + 8px);right:-8px}.wear-info .row{white-space:nowrap;flex-direction:row;justify-content:flex-start;align-items:center;gap:12px;font-size:14px;display:flex}.wear-info .key{color:#f5f6f7;min-width:28px;font-weight:600}.wear-info .label{color:#f5f6f7b8;flex:1}.wear-info .range{color:#f5f6f7b8;font-size:13px;font-weight:500}.special-patterns-btn{color:#f5f6f7b8;cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #40444e;border-radius:6px;margin-left:auto;padding:4px 10px;font-family:Saira,Saira Fallback,sans-serif;font-size:13px;transition:all .15s}.special-patterns-btn:hover{color:#f5f6f7;border-color:#6b7a99}.special-patterns-btn~.info-end{margin-left:0}.pattern-seed-field{align-items:center;gap:8px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.pattern-seed-label{color:#f5f6f7b8;white-space:nowrap;font-family:Saira,Saira Fallback,sans-serif;font-size:13px}.pattern-seed-input{font-variant-numeric:tabular-nums;width:72px;padding:4px 8px}.pattern-dropdown-wrap{position:absolute;bottom:100%;right:0}@media (width<=767px){.pattern-dropdown-wrap{z-index:50;inset:0}}.pattern-dropdown-wrap .pattern-dropdown-x{z-index:11;height:32px;position:absolute;top:4px;left:auto;right:4px}.pattern-dropdown-wrap .pattern-dropdown-x svg{width:14px;height:14px}.pattern-dropdown{z-index:10;background:#27292f;border:1px solid #40444e;border-radius:8px;flex-direction:column;gap:6px;width:max-content;max-width:min(420px,100vw - 32px);max-height:320px;margin-bottom:8px;padding:12px 16px;display:flex;position:relative;overflow-y:auto}@media (width<=767px){.pattern-dropdown{width:100%;max-width:none;height:100%;max-height:none;margin-bottom:0}}.tier-label{text-transform:uppercase;letter-spacing:.5px;padding:2px 0;font-family:Saira,Saira Fallback,sans-serif;font-size:12px;font-weight:600}.pattern-chips{flex-wrap:wrap;gap:4px;display:flex}.pattern-chip{color:#f5f6f7b8;cursor:pointer;background:0 0;border:1px solid #40444e;border-radius:4px;width:5ch;padding:3px 8px;font-family:Saira,Saira Fallback,sans-serif;font-size:13px;transition:all .15s}.pattern-chip:hover{color:#f5f6f7;border-color:#6b7a99}.pattern-chip.active{color:#fff;background:#3692f4;border-color:#3692f4}.special-patterns-btn{font-variant-numeric:tabular-nums}.preview-indicator{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:0 0;border:none;padding:0}.preview-indicator:disabled{cursor:default}.preview-indicator:focus-visible{outline-offset:2px;border-radius:50%;outline:2px solid #3692f4}.preview-indicator.available{color:#4caf50}.preview-indicator.available:hover:not(:disabled){color:#66bb6a}.preview-indicator.playing{color:#3692f4}.preview-indicator.playing:hover:not(:disabled){color:#50a0f6}.preview-indicator .dropdown{color:#f5f6f7;left:-8px;right:auto}.pattern-slider .pattern-markers{pointer-events:none;z-index:0;height:6px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.pattern-slider .pattern-marker{opacity:.8;border-radius:1px;width:2px;height:12px;position:absolute;top:-3px;transform:translate(-50%)}.pattern-slider .pattern-marker-range{opacity:.5;border-radius:2px;height:10px;position:absolute;top:-2px}