:root{
  --nana-safe-top:env(safe-area-inset-top,0px);
  --nana-safe-right:env(safe-area-inset-right,0px);
  --nana-safe-bottom:env(safe-area-inset-bottom,0px);
  --nana-safe-left:env(safe-area-inset-left,0px);
  --nana-nav-h:66px;
  --nana-content-max:1920px;
}
html,body{width:100%;min-width:0;overscroll-behavior:none}
body{padding:0;touch-action:manipulation}
.stage{
  left:var(--nana-safe-left)!important;
  right:var(--nana-safe-right)!important;
  top:var(--nana-safe-top)!important;
  bottom:calc(var(--nana-nav-h) + var(--nana-safe-bottom))!important;
}
.primary{
  left:var(--nana-safe-left)!important;
  right:var(--nana-safe-right)!important;
  height:calc(var(--nana-nav-h) + var(--nana-safe-bottom))!important;
  padding-bottom:max(6px,var(--nana-safe-bottom))!important;
}
.utilities{
  top:max(8px,var(--nana-safe-top))!important;
  right:max(8px,var(--nana-safe-right))!important;
}
.nana-hero{max-inline-size:100%;user-select:none;-webkit-user-drag:none}
img,video,canvas,iframe{max-width:100%}
button{min-height:32px}
.business-surface,.warehouse,.canvas{max-width:var(--nana-content-max);margin-inline:auto}

/* compact phone */
html[data-form-factor="phone"]{--nana-nav-h:60px}
html[data-form-factor="phone"] .primary button{min-width:66px!important;flex-basis:66px!important;font-size:8px!important}
html[data-form-factor="phone"] .utilities button{font-size:8px!important;padding:6px 8px!important}
html[data-form-factor="phone"] .nana-hero{height:min(88vh,720px)!important;max-width:98vw!important}
html[data-form-factor="phone"] .module-stack{max-width:96vw!important}
html[data-form-factor="phone"] .business-surface{padding:58px 14px 20px!important}
html[data-form-factor="phone"] .warehouse{inset:8% 2% 2%!important}
html[data-form-factor="phone"] .warehouse-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

/* tablet */
html[data-form-factor="tablet"]{--nana-nav-h:68px}
html[data-form-factor="tablet"] .primary button{min-width:82px!important;flex-basis:82px!important}
html[data-form-factor="tablet"] .nana-hero{height:min(94vh,980px)!important;max-width:88vw!important}
html[data-form-factor="tablet"] .warehouse-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}

/* desktop */
html[data-form-factor="desktop"]{--nana-nav-h:70px}
html[data-form-factor="desktop"] .stage{max-width:var(--nana-content-max);margin-inline:auto}
html[data-form-factor="desktop"] .primary{justify-content:center}
html[data-form-factor="desktop"] .primary button{max-width:150px}
html[data-form-factor="desktop"] .warehouse-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))!important}

/* TV / large display */
html[data-form-factor="tv"]{--nana-nav-h:84px}
html[data-form-factor="tv"] body{font-size:112%}
html[data-form-factor="tv"] .primary button{font-size:12px!important;min-width:112px!important}
html[data-form-factor="tv"] .utilities button{font-size:11px!important;padding:10px 14px!important}
html[data-form-factor="tv"] button:focus-visible{outline:3px solid currentColor;outline-offset:3px}
html[data-form-factor="tv"] .nana-hero{height:94%!important;max-width:70vw!important}

/* orientation */
html[data-orientation="landscape"][data-form-factor="phone"] .nana-hero{height:84%!important;max-width:76vw!important}
html[data-orientation="landscape"][data-form-factor="tablet"] .nana-hero{height:92%!important;max-width:74vw!important}

/* accessibility */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}