*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC",sans-serif;color:#22252a;background:#f3f4f6}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:2px solid #377c9c;outline-offset:4px}button{border:0}svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.viewer{height:100%;height:100dvh;position:relative;background:radial-gradient(ellipse at 52% 41%,#fff 0%,#f5f6f8 48%,#edeef1 100%);isolation:isolate}header{position:absolute;z-index:5;left:44px;right:44px;top:30px;display:flex;justify-content:space-between;align-items:center}.wordmark{text-decoration:none;color:inherit;font-size:27px;letter-spacing:-1.2px;font-weight:600;line-height:1.1}.wordmark span{display:block;font-size:10px;letter-spacing:1.2px;margin-top:9px;color:#737982;font-weight:450}.header-tools{display:flex;gap:9px}.header-tools button{background:#ffffffaa;border:1px solid #ffffffd9;box-shadow:0 2px 5px #171b2505;border-radius:50px;min-height:42px;padding:0 14px;display:flex;align-items:center;gap:8px;font-size:12px}.header-tools button:hover{background:#fff}.intro{position:absolute;top:145px;left:46px;z-index:3;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:2px;color:#7f858e}h1{font-size:36px;font-weight:560;letter-spacing:-1.5px;margin:13px 0 12px}.intro p{font-size:13px;color:#848992;margin:0}.detail-panel{position:absolute;left:46px;bottom:158px;z-index:3;width:245px;pointer-events:none}.detail-kicker{font-size:10px;color:#979da5;letter-spacing:1px}.detail-panel h2{font-size:18px;font-weight:560;letter-spacing:-.45px;margin:12px 0}.detail-panel p{font-size:12px;line-height:1.85;color:#868b94;margin:0;max-width:230px}.swatches{display:flex;gap:8px;margin-top:19px}.swatches i{width:16px;height:16px;border-radius:50%;display:block;border:1px solid #00000008}.silver{background:linear-gradient(130deg,#b5bac0,#eee,#aeb2b6)}.white{background:#dfdfd9}.blue{background:#2d719b}.focus-tools{position:absolute;z-index:5;right:44px;bottom:168px;display:flex;flex-direction:column;gap:8px}.focus-tools>span{font-size:10px;text-align:center;color:#959ba4;margin-bottom:5px}.focus-tools button{background:#ffffffaa;border:1px solid #ffffffbb;padding:10px 17px;border-radius:40px;font-size:11px}.focus-tools button:hover,.focus-tools button.active{background:#30353c;color:white}.bottom{position:absolute;z-index:5;bottom:36px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:18px;max-width:100%;width:max-content}.view-controls{display:flex;padding:5px;background:#ffffffb8;backdrop-filter:blur(24px);border:1px solid #fff;border-radius:40px;box-shadow:0 8px 30px #27314308;gap:3px}.view-controls button{padding:11px 22px;border-radius:30px;font-size:12px;background:transparent;white-space:nowrap;transition:background .2s,color .2s}.view-controls button:hover{background:#eef0f3}.view-controls button.active{background:#30353c;color:white}.helper{display:flex;gap:24px;align-items:center;font-size:10px;color:#959ba4;white-space:nowrap}.helper button{padding:0;background:none;font-size:10px;color:#767e89;display:flex;gap:6px;align-items:center}.helper button[aria-pressed=true]{color:#263d52}.mobile-help{display:none}.credits{position:absolute;right:44px;bottom:40px;z-index:3;font-size:10px;color:#959ba4;letter-spacing:.15px}.credits span{margin:0 7px;color:#b4b8bf}#stage{position:absolute;inset:0;z-index:1}#stage canvas{display:block;touch-action:none;outline:0}#stage canvas:active{cursor:grabbing}.loading{position:absolute;inset:0;background:#f3f4f6;z-index:4;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#848b95;transition:opacity .5s}.loading.done{opacity:0;pointer-events:none}.loading p{font-size:12px;margin:16px 0}.spinner{height:26px;width:26px;border:1.5px solid #d8dde3;border-top-color:#687c8e;border-radius:100%;animation:spin 1s linear infinite}.progress{width:120px;height:2px;background:#e1e4e8;overflow:hidden}.progress i{height:100%;width:0;background:#718493;display:block;transition:width .2s}@keyframes spin{to{transform:rotate(360deg)}}#error{position:absolute;inset:0;z-index:20;background:#f3f4f6;padding:25vh 25px;text-align:center}#error[hidden]{display:none}#error h2{font-size:22px}#error p{font-size:13px;color:#777;max-width:420px;margin:20px auto;line-height:1.8}#error button{padding:12px 25px;background:#30353c;color:#fff;border-radius:30px}
@media(max-width:1050px){header{left:28px;right:28px}.intro{left:30px;top:124px}h1{font-size:30px}.detail-panel{left:30px;bottom:157px;width:185px}.detail-panel p{max-width:175px}.focus-tools{right:28px}.credits{display:none}.view-controls button{padding:11px 19px}}
@media(max-width:650px){header{left:22px;right:22px;top:max(22px,env(safe-area-inset-top))}.wordmark{font-size:25px}.wordmark span{font-size:9px;letter-spacing:1px;margin-top:7px}.header-tools button{min-height:38px;padding:0 11px}.header-tools button span{display:none}.intro{top:113px;left:23px}.eyebrow{font-size:8px;letter-spacing:1.5px}h1{font-size:29px;margin:9px 0}.intro p{font-size:11px}.detail-panel{left:23px;bottom:160px;width:230px}.detail-kicker{font-size:9px}.detail-panel h2{font-size:16px;margin:7px 0}.detail-panel p{font-size:10px;line-height:1.6;max-width:240px}.detail-panel p br{display:none}.swatches{display:none}.focus-tools{right:22px;bottom:165px;gap:5px}.focus-tools>span{display:none}.focus-tools button{font-size:10px;padding:7px 12px}.bottom{bottom:max(25px,env(safe-area-inset-bottom));gap:19px;width:calc(100% - 36px)}.view-controls{width:100%;justify-content:space-between;padding:4px;gap:0}.view-controls button{padding:10px 0;width:16.667%;font-size:11px}.desktop-help{display:none}.mobile-help{display:inline}.helper{font-size:9px;gap:18px}.helper button{font-size:9px}}
@media(max-height:650px) and (min-width:651px){.intro{top:105px}h1{font-size:26px}.intro p{display:none}.detail-panel{bottom:133px}.detail-panel p,.swatches{display:none}.bottom{bottom:18px}.focus-tools{bottom:128px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.spinner{animation-duration:2s}}

.focused .intro{visibility:hidden}.focused .detail-panel{top:145px;right:44px;left:auto;bottom:auto}.focused .swatches{display:none}@media(max-width:650px){.focused .detail-panel{top:113px;left:23px;right:auto;bottom:auto;width:280px}}

#cap-toggle{pointer-events:auto;font-size:11px;border:1px solid #c9d2db;border-radius:20px;background:#ffffffd9;padding:8px 14px;margin-top:12px;color:#385c75}#cap-toggle[hidden]{display:none}

/* Website integration: preserve the approved viewer and add a route home. */
.header-tools .home-link{display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:#555d66;padding:0 12px;min-height:42px;text-decoration:none;white-space:nowrap}
.header-tools .home-link:hover{color:#22252a;background:#ffffffaa;border-radius:40px}
#error{padding:6vh 24px;overflow:auto}
#fallback-image{display:block;width:min(680px,100%);height:auto;margin:0 auto 20px;border-radius:16px}
#error .error-home{display:inline-block;padding:12px 20px;color:#404b55;font-size:13px}
.no-script{position:absolute;inset:0;z-index:30;background:#f3f4f6;text-align:center;padding:5vh 24px;overflow:auto}
.no-script img{display:block;width:min(750px,100%);height:auto;margin:20px auto}
.no-script a{display:inline-block;padding:14px;color:#263d52}
@media(max-width:650px){.header-tools{gap:3px}.header-tools .home-link{font-size:11px;padding:0 7px;min-height:38px}#error h2{font-size:20px}}