*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#e3e5ea;color:#131414;font-family:Manrope,sans-serif}.page{max-width:402px;margin:auto;background:#e3e5ea}button,a,label{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}button:focus-visible,a:focus-visible,label:focus-within{outline:2px solid #8231e1;outline-offset:5px}button[hidden]{display:none}.nav{height:60px;padding:0;background:#131414;display:flex;align-items:center;justify-content:space-between;color:white}.nav button{width:60px;height:60px;display:grid;place-items:center}.nav button img{display:block}.wordmark{font-family:Kodchasan,sans-serif;font-size:18px;letter-spacing:1.8px;color:white;text-decoration:none}.product-nav{height:59px;background:#2a2b2b;color:white;display:flex;align-items:center;justify-content:space-between;padding:16px}.product-nav button:first-child{display:flex;align-items:center;gap:10px;font-size:14px;letter-spacing:.84px}.buy{font-size:14px;background:#0054d3;border-radius:29px;padding:4px 12px}.customizer{padding:46px 0;display:flex;flex-direction:column;align-items:center;gap:44px}.intro{text-align:center;width:calc(100% - 76px);padding-bottom:20px;font-family:Kodchasan,sans-serif}.new{display:inline-block;background:#ccbef340;border:1px solid #c098e6;color:#9229f4;border-radius:100px;padding:4px 8px;font-size:12px;font-weight:700;letter-spacing:.72px}.intro h1{margin:4px -15px;font-size:42px;letter-spacing:.84px;white-space:nowrap;line-height:1.3;font-weight:300}.intro h1 strong{font-weight:600}.intro p{margin:4px 0 0;font-size:16px;font-weight:600;letter-spacing:.96px}.figure{width:100%;height:420px;margin:-10px 0 -10px;position:relative}#view{height:100%;width:100%;cursor:grab;touch-action:pan-y}#view:active{cursor:grabbing}#view canvas{display:block}#status{position:absolute;inset:45% 0 auto;text-align:center;font-size:13px;pointer-events:none}.color-toggle{display:flex;gap:16px}.color-toggle button{width:31px;height:31px;border-radius:50%;padding:0}#color-black{background:#000}#color-white{background:#fff}.color-toggle button[aria-pressed=true]{box-shadow:0 0 0 3px #e3e5ea,0 0 0 4px #aeb5c7}.skin-section{width:calc(100% - 76px);padding:20px 0;border-block:1px solid #aeb5c7;margin:16px 0;display:flex;flex-direction:column;gap:16px}.skin-heading{display:flex;justify-content:space-between;align-items:center;font-size:16px;letter-spacing:.96px;font-weight:600}.skin-heading button{display:flex;gap:10px;align-items:center;color:#4556f9;font-weight:500;padding:0}.skins{display:flex;overflow-x:auto;scrollbar-width:none;margin:0 -4px;padding:4px;max-width:calc(100% + 8px)}.skin-choice{flex:0 0 53px;position:relative;height:53px;opacity:.3;padding:0}.skin-choice:first-child{opacity:1}.skin-choice[aria-pressed=true]{opacity:1}.skin-art{position:absolute;width:31px;height:31px;object-fit:cover;border-radius:50%;top:11px;left:11px}.skin-ring{position:absolute;left:0;top:0}.skin-choice:not([aria-pressed=true]) .skin-ring{opacity:0}.upload{color:#8231e1;font-size:15px;letter-spacing:.9px;font-weight:500;padding:4px;cursor:pointer;align-self:flex-start}#skin{position:absolute;width:1px;height:1px;opacity:0}#black{font-size:12px;color:#4556f9;padding:0;text-align:left}.bundles{display:flex;justify-content:space-between;width:calc(100% - 76px)}.bundles button{width:90px;height:89px;border-radius:8px;background:#dcdde2;position:relative;border:1px solid transparent}.bundles button[aria-pressed=true]{background:transparent;border-color:#aeb5c7}.bundles span{position:absolute;right:6px;top:5px;color:#8231e1;font-family:Kodchasan;font-size:11px;letter-spacing:.66px}.add{width:calc(100% - 76px);display:flex;justify-content:space-between;align-items:center;background:#000;color:white;font-family:Inter,sans-serif;font-size:18px;font-weight:600;border-radius:8px;padding:20px 24px;box-shadow:0 4px 5px -2px #2f122d2e}.spacer{height:48px}.map-section{background:#131414;color:#fff;padding:112px 0 24px;display:flex;flex-direction:column;gap:44px}.map-section h2{font-size:44.444px;line-height:53.333px;margin:0;text-align:center;font-weight:700;color:transparent;background:linear-gradient(165deg,#f5f8fc,#2c6cbe);background-clip:text;padding-bottom:39px}.map-image{display:block;width:100%;aspect-ratio:400/507;object-fit:cover}.map-section p{font-size:23px;line-height:32px;letter-spacing:.92px;text-align:center;margin:0;padding:0 24px}.find-my{margin:0 24px;border:1px solid #14506b8f;border-radius:16px;height:118px;display:flex;flex-direction:column;gap:11px;align-items:center;justify-content:center;background:radial-gradient(ellipse at left bottom,#0a2a3b82,transparent 70%),linear-gradient(268deg,#070d21,#020708 46%,#06202b);box-shadow:inset 0 1px 1px #8eacd112;font-size:15.556px}.find-my small{font-size:13.333px;color:#ffffffb3}.map-spacer{height:140px}dialog{border:0;border-radius:16px;background:#e3e5ea;padding:28px;width:calc(100% - 40px);max-width:360px;box-shadow:0 15px 80px #0004}dialog::backdrop{background:#0007}.close{position:absolute;right:8px;top:5px;font-size:25px}dialog h2{font-family:Kodchasan;font-size:23px}dialog p{line-height:1.6}dialog a{color:#4556f9}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:370px){.intro h1{font-size:36px}.skin-section,.bundles,.add{width:calc(100% - 48px)}.bundles button{width:27%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}



.skin-ring{left:10.5px;top:10.5px}

/* Fade only the empty floor below the product, preserving its full silhouette. */
#view{mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%)}
.hero-enter .intro .new,.hero-enter .intro h1,.hero-enter .intro p{animation:hero-title-in .85s cubic-bezier(.22,1,.36,1) both}
.hero-enter .intro .new{animation-delay:0s}
.hero-enter .intro h1{animation-delay:.12s}
.hero-enter .intro p{animation-delay:.24s}
@keyframes hero-title-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.hero-enter .intro .new,.hero-enter .intro h1,.hero-enter .intro p{animation:none}}

.product-nav{height:auto;min-height:42px;padding:8px 16px;font-size:14px;letter-spacing:.84px}
.product-nav #product-menu{width:32px;height:26px;display:grid;place-items:center;padding:0}
.product-nav #product-menu img{width:18px;height:18px}
.product-links{display:flex;flex-direction:column;gap:8px}
.product-links a,.product-links button{display:flex;justify-content:space-between;padding:14px 0;text-align:left;border-bottom:1px solid #aeb5c7;text-decoration:none;font-size:18px}
.product-links span{font-size:12px;color:#777;align-self:center}
.return-products{padding:12px 0;color:#4556f9}
.hero-enter .intro .new,.hero-enter .intro h1,.hero-enter .intro p{animation-duration:1.1s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
.hero-enter .intro .new{animation-name:hero-badge-in}
.hero-enter .intro h1{animation-name:hero-heading-in;animation-delay:.13s}
.hero-enter .intro p{animation-name:hero-heading-in;animation-delay:.3s}
@keyframes hero-heading-in{0%{opacity:0;transform:translateY(34px) scale(.92);filter:blur(5px)}70%{opacity:1;transform:translateY(-3px) scale(1.012);filter:blur(0)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes hero-badge-in{0%{opacity:0;transform:translateY(22px) scale(.7) rotate(-10deg)}70%{opacity:1;transform:translateY(-3px) scale(1.07) rotate(2deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@media(prefers-reduced-motion:reduce){.hero-enter .intro .new,.hero-enter .intro h1,.hero-enter .intro p{animation:none}}

.customizer:not(.hero-enter) .intro{visibility:hidden}

.product-option{padding:14px 0;border-bottom:1px solid #aeb5c7;font-size:18px}

/* Title motion: translation and opacity only, with one gentle overshoot. */
.hero-enter .intro .new,.hero-enter .intro h1,.hero-enter .intro p{animation-name:hero-soft-slide;animation-duration:1s;animation-timing-function:cubic-bezier(.22,.61,.36,1);filter:none}
@keyframes hero-soft-slide{0%{opacity:0;transform:translateY(20px)}72%{opacity:1;transform:translateY(-5px)}100%{opacity:1;transform:translateY(0)}}
.product-chevron{display:block;width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .35s ease}
#product-menu[aria-expanded=true] .product-chevron{transform:translateY(2px) rotate(225deg)}
.product-dropdown{display:grid;grid-template-rows:0fr;background:#2a2b2b;color:white;transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1)}
.product-dropdown.open{grid-template-rows:1fr}
.product-dropdown>div{overflow:hidden;opacity:0;transform:translateY(-12px);transition:opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.product-dropdown.open>div{opacity:1;transform:translateY(0)}
.product-dropdown span{display:block;padding:18px 16px;font-size:14px;letter-spacing:.84px}
.product-dropdown span:last-child{padding-bottom:20px}
.skins{gap:12px;margin:0;padding:4px;max-width:100%}
.skin-choice{flex:0 0 40px;width:40px;height:57px;border-radius:4px;opacity:1}
.skin-art{position:absolute;inset:0;width:40px;height:57px;object-fit:cover;border-radius:4px}
.skin-choice .skin-ring{display:none}
.skin-choice[aria-pressed=true]{outline:2px solid #8231e1;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.hero-enter .intro .new,.hero-enter .intro h1,.hero-enter .intro p{animation:none}.product-dropdown,.product-dropdown>div,.product-chevron{transition:none}}

.uploaded-card{position:relative;flex:0 0 40px;width:40px;height:57px}
.uploaded-card .skin-choice{display:block}
.remove-upload{position:absolute;z-index:2;right:-7px;top:-8px;width:25px;height:25px;border-radius:50%;border:3px solid #e3e5ea;background:#b6d2f1;color:#147cef;font:23px/18px Arial,sans-serif;padding:0;display:grid;place-items:center}
.skins{padding-top:10px;padding-bottom:5px}

/* Artwork removal is available on the uploaded skin card. */
#black{display:none}

#art-editor[hidden]{display:none}#art-editor{position:fixed;inset:0;z-index:40;background:#e3e5ea;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:25px 20px}
.editing-art{overflow:hidden}.editing-art .figure{position:fixed;z-index:41;top:110px;left:50%;transform:translateX(-50%);width:min(100%,420px);height:calc(100dvh - 300px);margin:0}.editing-art #view{mask-image:none;-webkit-mask-image:none;touch-action:none}
.editor-heading{text-align:center}.editor-heading h2{font-family:Kodchasan;margin:0 0 8px}.editor-heading p{margin:0;color:#666;font-size:14px}.editor-controls{width:min(100%,360px);display:flex;flex-direction:column;gap:14px;z-index:42}.editor-controls label{font-size:13px}.editor-controls input{width:100%;accent-color:#8231e1}.editor-controls button{background:#111;color:white;padding:15px;border-radius:9px;font-size:18px}
.pinch-hint{position:fixed;z-index:43;top:45%;left:calc(50% - 35px);width:70px;pointer-events:none;opacity:0}.pinch-hint span{position:absolute;width:15px;height:36px;border-radius:12px;background:#fff;border:2px solid #8231e1;box-shadow:0 2px 6px #0003;transform:rotate(-20deg)}.pinch-hint span:last-child{right:0;transform:rotate(20deg)}.pinch-hint.demonstrating{animation:pinch-show 2s both}.pinch-hint.demonstrating span{animation:pinch-left 2s both}.pinch-hint.demonstrating span:last-child{animation:pinch-right 2s both}@keyframes pinch-show{0%,100%{opacity:0}15%,85%{opacity:.85}}@keyframes pinch-left{0%,100%{transform:translateX(8px) rotate(-20deg)}50%{transform:translateX(-12px) rotate(-20deg)}}@keyframes pinch-right{0%,100%{transform:translateX(-8px) rotate(20deg)}50%{transform:translateX(12px) rotate(20deg)}}

.pinch-hint{width:100px;height:100px;left:calc(50% - 50px);top:40%}.pinch-hint svg{width:100%;height:100%;filter:drop-shadow(0 2px 4px #0002)}.pinch-hint.demonstrating{animation:gesture-pinch 2s both}@keyframes gesture-pinch{0%,100%{opacity:0;transform:scale(.9)}15%{opacity:.85;transform:scale(.9)}50%{opacity:.85;transform:scale(1.12)}85%{opacity:.85;transform:scale(.9)}}