/* One bounded viewport, independent of the surrounding Shopify theme. */
:root{--v-background:#f5f5f4;--v-surface:#ffffff;--v-text:#161616;--v-muted:#777777;--v-accent:#02b881;--v-menu:#111111;--v-menu-text:#bbbbbb;--v-selected:#f7f7f7;--v-selected-text:#151515;--v-button:#111111;--v-button-text:#ffffff;--v-tag:#111111;--v-tag-text:#ffffff;--v-heading:30px;--v-title:24px;--v-body:15px;--v-stats:26px;--v-menu:14px;--v-tag:11px;--v-button-size:15px;--v-mobile-title:21px;--v-mobile-body:13px;--v-mobile-stats:22px;--v-mobile-menu:13px;--v-mobile-button:18px;--card-height:230px;--card-scale:1;--ui-scale:1}
/* Font and color variables have distinct names. */
:root{--v-menu-color:#111111;--v-tag-color:#111111;--v-menu-size:14px;--v-tag-size:11px;--v-button-size:15px}
html{height:100%;background:var(--v-background);color:var(--v-text)}
body{height:100svh;min-height:0;overflow:hidden;display:grid;place-items:center;background:var(--v-background);padding:18px 24px}
html.embedded body{height:100vh;padding:0}
.app{height:min(820px,calc(100svh - 36px));min-height:0;width:min(1400px,100%);max-width:100%;display:grid;grid-template-columns:clamp(180px,21vw,264px) minmax(0,1fr);padding:0;border:1px solid #dedede;border-radius:14px;overflow:hidden;box-shadow:0 14px 50px #00000009;background:var(--v-background)}
.embedded .app{height:100%;width:100%;border:0;border-radius:0;box-shadow:none}
.sidebar{min-height:0;padding:calc(26px * var(--ui-scale)) 18px;gap:0;background:var(--v-menu-color);color:var(--v-menu-text);overflow:hidden}
.brand{font-size:calc(32px * var(--ui-scale));color:var(--v-menu-text);padding:0;margin:0}
.sidebar-heading{padding:calc(26px * var(--ui-scale)) 2px calc(20px * var(--ui-scale));margin:0}
.sidebar-heading h1{font-size:calc(var(--v-heading) * var(--ui-scale));line-height:1.12;margin:12px 0;overflow-wrap:anywhere;color:var(--v-menu-text)}
.sidebar-heading p{font-size:calc(14px * var(--ui-scale));line-height:1.4;color:var(--v-menu-text)}
.sidebar-heading .eyebrow{font-size:calc(11px * var(--ui-scale));color:var(--v-menu-text)}
.components{gap:calc(5px * var(--ui-scale));min-height:0}
.component{min-height:0;height:auto;padding:calc(12px * var(--ui-scale)) 10px;font-size:calc(var(--v-menu-size) * var(--ui-scale));line-height:1.2;color:var(--v-menu-text);white-space:normal}
.component span:nth-child(2){overflow-wrap:anywhere}
.component.active{background:var(--v-selected);color:var(--v-selected-text)}
.nav-separator{padding:calc(16px * var(--ui-scale)) 10px 8px;font-size:10px;color:var(--v-menu-text)}
.sidebar-bottom{padding:calc(22px * var(--ui-scale)) 0 0;margin-top:auto}
.sidebar-bottom p,.sidebar-bottom p span{font-size:calc(11px * var(--ui-scale));color:var(--v-menu-text)}
main{min-height:0;min-width:0;display:block;height:100%;overflow:hidden}
.main-header{display:none}.stage{position:absolute;inset:0;height:100%;min-height:0;max-height:none;overflow:hidden;background:radial-gradient(ellipse at center,var(--v-surface),var(--v-background))}
.stage-grid,.model-caption{display:none}
#canvas-container{inset:22px calc(clamp(220px,25vw,320px) + 28px) 70px 12px;height:auto;min-height:0}
.detail{position:absolute;left:auto;right:16px;top:50%;bottom:auto;transform:translateY(-50%);width:clamp(220px,25vw,320px);margin:0;padding:calc(20px * var(--card-scale));background:var(--v-surface);border:1px solid #dedede;color:var(--v-text);display:block;transition:none}
.detail h3{font-size:calc(var(--v-title) * var(--card-scale));line-height:1.18;margin:calc(15px * var(--card-scale)) 0 calc(10px * var(--card-scale));overflow-wrap:anywhere}
.detail p{font-size:calc(var(--v-body) * var(--card-scale));line-height:1.45;color:var(--v-muted);overflow-wrap:anywhere}
.detail-top{font-size:calc(10px * var(--card-scale));color:var(--v-muted)}
.detail-top span:last-child{font-size:calc(13px * var(--card-scale));color:var(--v-accent)}
.detail-stats{margin-top:calc(15px * var(--card-scale));padding-top:calc(12px * var(--card-scale));gap:10px;align-items:flex-start}
.detail-stats div{min-width:0;flex:1;gap:calc(5px * var(--card-scale))}
.detail-stats strong{font-size:calc(var(--v-stats) * var(--card-scale));color:var(--v-accent);overflow-wrap:anywhere}
.detail-stats small{font-size:.55em}.detail-stats div>span{font-size:calc(11px * var(--card-scale));line-height:1.3;color:var(--v-muted);overflow-wrap:anywhere}
.canvas-tools{left:18px;bottom:18px;top:auto;background:var(--v-surface);color:var(--v-text)}
.gesture{left:auto;right:calc(clamp(220px,25vw,320px) + 32px);bottom:30px;top:auto;font-size:10px;color:var(--v-muted)}
.gesture-divider,.gesture span:last-child{display:none}
.part-tag{width:max-content;max-width:calc(100% - 30px)}
.part-tag-label{background:var(--v-tag-color);color:var(--v-tag-text);font-size:var(--v-tag-size);border-color:var(--v-tag-color)}
.tag-point{background:var(--v-tag-text)}
#start-viewer{background:var(--v-button);color:var(--v-button-text);border-color:var(--v-button);font-size:var(--v-button-size);padding:15px 20px;line-height:1.25;min-height:48px;max-width:100%;overflow-wrap:anywhere}
#loading{color:var(--v-muted);max-width:100%}.viewer-start{bottom:6px}.viewer-poster{height:calc(100% - 90px);max-height:100%;max-width:85%;object-fit:contain;align-self:flex-start}
.card-probe{position:absolute!important;top:0!important;left:0!important;right:auto!important;bottom:auto!important;visibility:hidden!important;pointer-events:none!important;transform:none!important;height:auto!important;z-index:-1}
@media(max-width:760px), (max-width:960px) and (max-height:500px){
 body{padding:0;display:block}.app{width:100%;height:100svh;max-height:100%;display:flex;flex-direction:column;border:0;border-radius:0;box-shadow:none;padding:0;min-height:0}
 .sidebar{height:48px;min-height:48px;flex:none;padding:12px 18px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:12px}
 .nav-separator,.nav-end{display:none}
 .brand{font-size:26px;line-height:1}.sidebar-heading{padding:0;margin:0;float:none;display:block}.sidebar-heading .eyebrow{font-size:10px}.sidebar-heading h1,.sidebar-heading p,.sidebar-bottom{display:none}
 main{flex:1;min-height:0;height:auto;position:relative}
 .stage{inset:0 0 64px;height:auto;min-height:0}
 .detail{display:block;position:absolute;left:12px;right:12px;top:8px;bottom:auto;transform:none;width:auto;padding:calc(15px * var(--card-scale));z-index:4}
 .detail h3{font-size:calc(var(--v-mobile-title) * var(--card-scale));margin:calc(10px * var(--card-scale)) 0 calc(7px * var(--card-scale))}
 .detail p{font-size:calc(var(--v-mobile-body) * var(--card-scale));line-height:1.38}
 .detail-stats strong{font-size:calc(var(--v-mobile-stats) * var(--card-scale))}
 #canvas-container{inset:calc(var(--card-height) + 16px) 0 28px;height:auto;min-height:0}
 .canvas-tools{display:none}.gesture{left:auto;right:14px;top:auto;bottom:8px;font-size:9px}
 .mobile-component-dock{display:block;position:absolute;inset:auto 0 0;height:64px;min-height:64px;max-height:64px;width:100%;background:var(--v-menu-color);padding:0;border:0;contain:strict;overflow:hidden}
 .mobile-component-dock .components{position:absolute;inset:0;display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;width:100%;height:64px;min-height:64px;max-height:64px;margin:0;padding:8px 12px;gap:7px;align-items:center;touch-action:manipulation}
 .mobile-component-dock .component{width:auto;flex:0 0 auto;height:48px;min-height:48px;max-height:48px;padding:10px 12px;font-size:var(--v-mobile-menu);white-space:nowrap;background:color-mix(in srgb,var(--v-menu-color),var(--v-menu-text) 8%);color:var(--v-menu-text)}
 .mobile-component-dock .component.active{background:var(--v-selected);color:var(--v-selected-text)}
 .component span:nth-child(2){overflow-wrap:normal}.part-tag-label{font-size:var(--v-tag-size)}
 #start-viewer{font-size:var(--v-mobile-button);padding:17px 24px;min-height:56px;border-radius:7px}
 .viewer-start{left:10px;right:10px;bottom:2px;gap:5px}.viewer-poster{height:calc(100% - 95px)}
}
@media(max-height:500px) and (max-width:960px){.sidebar{height:36px;min-height:36px;padding:6px 14px}.stage{bottom:52px}.mobile-component-dock,.mobile-component-dock .components{height:52px;min-height:52px;max-height:52px}.mobile-component-dock .components{padding:4px 10px}.mobile-component-dock .component{height:44px;min-height:44px;max-height:44px}#start-viewer{min-height:48px;padding:11px 18px}.viewer-poster{height:calc(100% - 75px)}#loading{font-size:9px}}
@media(min-width:601px) and (max-width:960px) and (max-height:500px){.detail{left:10px;right:auto;top:10px;width:43%}#canvas-container{inset:8px 0 24px 46%}.gesture{right:12px}.viewer-start{gap:2px}#loading{font-size:9px}.viewer-poster{height:calc(100% - 75px)}}